<script setup>
import {
    ref,
    onMounted,
    getCurrentInstance,
    watch,
    computed,
    toRaw,
    reactive,
} from "vue";
import { mainStore } from "../store/index";
import { ElMessage, ElMessageBox } from "element-plus";
import $fetch from "../utils/request";
const { proxy } = getCurrentInstance();
const { $mapevent } = proxy;
const store = mainStore();
const stepNumder = ref(1);
const sliderDemoBlock = ref(0);
let maxStep = ref(0);
let layerGisLeft = ref(-300);
let glzArrys = computed(() => {
    return store.glzArrys;
});

watch(glzArrys, (newVal, oldVal) => {
    maxStep.value = store.glzArrys.length - 1;
    for (let index = 0; index < store.glzArrys.length; index++) {
        let code = store.glzArrys[index].code;
        marks.value = {
            ...marks.value,
            [index]: `${
                index != 0 &&
                index != store.glzArrys.length - 1 &&
                code % 5 != 0
                    ? ""
                    : code
            }`,
        };
    }
    // console.log('滑块数据',newVal, oldVal);
});

onMounted(() => {
    quest_list();
    setTimeout(() => {
        layerGisLeft.value = 20;
    }, 400);
});
setTimeout(() => {
    watch(sliderDemoBlock, (newVal, oldVal) => {
        $mapevent.Zoomto(toRaw(glzArrys.value[newVal])._position._value);
    });
}, 100);

let defaultCheckedKeys = ref([
    "01-2",
    "01-3",
    "01-4",
    "01-5",
    "01-6",
    "01-7",
    "01-8",
]);
let treeRef = ref(null);
let marks = ref({});
const defaultProps = {
    children: "children",
    label: "label",
};
let treeData = ref([
    {
        id: "01_1",
        label: "基础地图",
        disabled: true,
        children: [
            {
                id: "01-2",
                label: "卫星地图",
                children: [],
                disabled: false,
                type: 1006,
                alpha: 100,
            },
            {
                id: "01-4",
                label: "施工方设计地图",
                children: [],
                disabled: false,
                type: 1007,
                alpha: 50,
            },
            {
                id: "01-3",
                label: "电子地图",
                children: [],
                disabled: false,
                type: 1008,
                alpha: 100,
            },
            {
                id: "01-8",
                label: "经纬网",
                children: [],
                disabled: false,
                type: 1021,
            },
            {
                id: "01-7",
                label: "地形",
                children: [],
                disabled: false,
                type: 1009,
            },
        ],
    },
    {
        id: "02-1",
        label: "无人机地图",
        children: [],
        disabled: true,
    },
    // {
    //     id: "03-1",
    //     label: "地图标注",
    //     children: punctuationList,
    //     disabled: true,
    // },
    {
        id: "04-1",
        label: "三维地图",
        children: [
            {
                id: "04-2",
                label: "兰考西收费站",
                disabled: true,
                type: 1301,
            },
        ],
        disabled: true,
    },
    // {
    //     id: "05-1",
    //     label: "道路结构物",
    //     children: [
    //         {
    //             id: "05-1",
    //             label: "收费站",
    //             children: [],
    //             disabled: true,
    //         },
    //         {
    //             id: "05-2",
    //             label: "服务区",
    //             children: [],
    //             disabled: true,
    //         },
    //         {
    //             id: "05-3",
    //             label: "桥梁",
    //             children: [],
    //             disabled: true,
    //         },
    //         {
    //             id: "05-4",
    //             label: "隧道",
    //             children: [],
    //             disabled: true,
    //         },
    //     ],
    //     disabled: true,
    // },
    {
        id: "06-1",
        label: "视点",
        children: computed(() => {
            return store.viewpoint;
        }),
        disabled: true,
    },

]);

const formatTooltip = (val) => {
    return val / 100;
};
function sliderInput(alpha, type) {
    $mapevent.layseAlpha(type - 1006, alpha / 100);
}
function treeCheckedChange(data, isChecked, n, s) {
    if (data.type == 1006 || data.type == 1007 || data.type == 1008) {
        $mapevent.laysetShow(data.type, isChecked);
        if (!isChecked) {
            let index = defaultCheckedKeys.value.indexOf(data.id);
            defaultCheckedKeys.value.splice(index, 1);
        } else {
            defaultCheckedKeys.value.push(data.id);
        }
    } else if (data.type == 1009) {
        $mapevent.toggleTerrain(isChecked);
    } else if (data.type == 1021) {
        // if (isChecked) {
        //     treeData.value[1].children.forEach((element, indexs) => {
        //         let index = defaultCheckedKeys.value.indexOf(element.id);
        //         if (index !== -1) {
        //             defaultCheckedKeys.value.splice(index, 1);
        //             defaultCheckedKeys.value.push(data.id);
        //             treeRef.value.setCheckedKeys(
        //                 defaultCheckedKeys.value,
        //                 false
        //             );
        //             $mapevent.f_Setmap(element.index, !isChecked);
        //         }
        //     });
        // }
        $mapevent.f_ShowGridMap(isChecked);
    } else if (data.type == 1023 || data.type == 1022) {
        // if (isChecked) {
        //     let index = defaultCheckedKeys.value.indexOf("01-8");
        //     if (index !== -1) {
        //         defaultCheckedKeys.value.splice(index, 1);
        //         defaultCheckedKeys.value.push(data.id);
        //         treeRef.value.setCheckedKeys(defaultCheckedKeys.value, false);
        //         $mapevent.f_ShowGridMap(isChecked);
        //     }
        // }
        $mapevent.f_Setmap(data.index, isChecked);
    }
}
function clickTree(data) {
    if (data.type == 1011) {
        $mapevent.Zoomto(data.position);
    } else if (data.type == 1010) {
        $mapevent.f_SetMapView(
            data.heading, // heading
            data.pitch, // pitch
            data.roll, // roll
            data.lon, // lon
            data.lat, // lat
            data.height // height
        );
    } else if (data.type == 1301) {
        $mapevent.f_LoadTile(
            "http://zsapp.yugaosu.com:8001/lkx/tileset.json",
            0
        );
        // $mapevent.f_LoadTile('http://zsapp.yugaosu.com:8001/lkx2/tileset.json',-179)
    } else if (data.type == 1401) {
        $mapevent.f_SetMapView(
            data.heading, // heading
            data.pitch, // pitch
            data.roll, // roll
            data.lon, // lon
            data.lat, // lat
            data.height // height
        );
    }
}
function quest_list() {
    unmannedDrone.forEach((element, indexs) => {
        let index = $mapevent.f_Setmap(element.url, "ok");
        treeData.value[1].children.push({
            ...element,
            label: element.name,
            index,
            id: element.id + element.idx,
        });
    });
    $mapevent.f_Setmap();
    store.changeViewpoint();
}
let editViewpoint = reactive({
    show: false,
    name: null,
    id: null,
});
/**
 * 视点名称修改
 */
function ViewpointModification(embryo) {
    editViewpoint.name = embryo.name;
    editViewpoint.id = embryo.id;
    editViewpoint.show = true;
}
function editpoint() {
    $fetch(
        "/viewPoint/edit",
        {
            id: editViewpoint.id,
            name: editViewpoint.name,
            ...$mapevent.f_GetCurCameraInfo(),
        },
        "post"
    ).then((red) => {
        if (red.code == 200) {
            ElMessage({
                type: "success",
                message: "保存成功！",
            });
            store.changeViewpoint();
            editViewpoint.show = false;
        }
    });
}
/**
 * 视点删除
 */
function ViewpointDeletion(embryo) {
    console.log(embryo);
    ElMessageBox({
        title: "提示",
        message: "是否确定删除该视点？",
        showCancelButton: true,
        confirmButtonText: "确定",
        confirmButtonClass: "danger",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
            if (action === "confirm") {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = "等待...";
                $fetch(
                    `/viewPoint/delete/${editViewpoint.id}`,
                    {},
                    "GET",
                    localStorage.getItem("token")
                ).then((res) => {
                    done();
                    setTimeout(() => {
                        instance.confirmButtonLoading = false;
                    }, 300);
                });
            } else {
                done();
            }
        },
    })
        .then(() => {
            ElMessage({
                type: "success",
                message: "删除成功！",
            });
            store.changeViewpoint();
            editViewpoint.show = false;
        })
        .catch((err) => {
            console.log(123, err);
            ElMessage({
                type: "info",
                message: "取消删除！",
            });
        });
}
</script>
<template>
    <el-dialog
        id="layerGis"
        :style="{ left: `${layerGisLeft}px` }"
        v-model="store.layerGisShow"
        title="资源管理器"
        draggable
        :close-on-click-modal="false"
    >
        <div class="wrap">
            <el-tree
                :data="treeData"
                ref="treeRef"
                show-checkbox
                :check-strictly="true"
                node-key="id"
                :props="defaultProps"
                @node-click="clickTree"
                @check-change="treeCheckedChange"
                :default-expanded-keys="['01_1', '02-1', '04-1', '06-1']"
                :default-checked-keys="defaultCheckedKeys"
            >
                <template #default="scope">
                    <div class="custom-node">
                        <span>{{ scope.node.label }}</span>
                    </div>
                    <div
                        style="width: 66px; margin-left: 10px"
                        v-if="
                            scope.node.data.type == 1006 ||
                            scope.node.data.type == 1007 ||
                            scope.node.data.type == 1008 ||
                            scope.node.data.type == 1022 ||
                            scope.node.data.type == 1023
                        "
                    >
                        <el-slider
                            v-model="scope.node.data.alpha"
                            :format-tooltip="formatTooltip"
                            input-size="default"
                            @input="
                                sliderInput(
                                    scope.node.data.alpha,
                                    scope.node.data.type
                                )
                            "
                        />
                    </div>
                    <div
                        style="flex: 1; text-align: right"
                        v-if="scope.node.data.type == 1401"
                    >
                        <span
                            style="margin-right: 10px; cursor: pointer"
                            @click.native.stop="
                                ViewpointModification(scope.node.data)
                            "
                            >修改</span
                        >
                    </div>
                </template>
            </el-tree>
        </div>
    </el-dialog>
    <div id="sliderDemoBlock">
        <div>
            <el-slider
                v-model="sliderDemoBlock"
                :step="stepNumder"
                show-stops
                :show-tooltip="false"
                :marks="marks"
                :max="maxStep"
            />
        </div>
    </div>
    <el-dialog
        id="editViewpoint"
        v-model="editViewpoint.show"
        title="编辑视点"
        draggable
        :close-on-click-modal="false"
    >   
    <span style="color: #fff;line-height: 20px;">自由拖动视角保存修改</span>
    <el-input style="margin-top: 8px;" v-model="editViewpoint.name" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editViewpoint.show = false">取消</el-button>
                <el-button class="danger" type="primary" @click="ViewpointDeletion"> 删除 </el-button>
                <el-button type="primary" @click="editpoint"> 保存 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less">
#layerGis {
    position: fixed;
    z-index: 2;
    width: 280px;
    height: 55%;
    top: 0px;
    left: -300px;
    pointer-events: auto;
    border: 2px solid #006699;
    background-color: #00669957;
    transition: left 1s ease-out;
    .el-dialog__headerbtn {
        top: -2px;
    }
    .el-tree-node__content {
        color: #fff;
    }
    .el-tree-node__content:hover {
        background-color: #0066998a;
    }
    .el-dialog__header {
        width: calc(100% - 40px);
        padding: 10px 20px;
        background-color: #0066997c;
        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }
        .el-icon svg {
            color: #fff;
        }
    }
    .el-checkbox.is-disabled {
        display: none;
    }
    .el-tree {
        background-color: transparent;
    }
    .el-dialog__body {
        padding-top: 0;
        padding-bottom: 0;
        height: calc(100% - 20px - 54px);
        overflow-y: auto;
    }
    .el-tree-node:focus > .el-tree-node__content {
        background-color: #0066998a;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .el-tree-node {
        position: relative;
    }

    .el-tree-node__expand-icon.is-leaf {
        display: none;
    }

    .el-tree-node__children {
        padding-left: 16px;
    }

    .el-tree-node :last-child:before {
        height: 38px;
    }

    .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:before {
        border-left: 2px solid #014769;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .el-tree-node:after {
        border-top: 2px solid #014769;
        height: 20px;
        top: 12px;
        width: 24px;
    }
    .el-slider__button {
        width: 15px;
        height: 15px;
    }
}
#sliderDemoBlock {
    width: 98vw;
    position: fixed;
    bottom: -10px;
    left: calc((100vw - 98vw - 16px) / 2);
    padding: 6px 0 24px 0;
    border-radius: 20px;
    .slider-demo-block {
        display: flex;
        align-items: center;
    }
    .slider-demo-block .el-slider {
        margin-top: 0;
        margin-left: 12px;
    }
    .childrenLabel {
        // padding-bottom: 24px;
        font-size: 14px;
        line-height: 14px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .el-slider__marks-text {
        // margin-top: -30px;
        color: #fff;
    }
    .timer-left {
        position: absolute;
        top: 50%;
        left: 20px;
        z-index: 99;
        width: 40px;
        height: 37px;
        margin-top: -18.5px;
        background: url(../assets/topimg/play.png) no-repeat;
        background-size: cover;
        cursor: pointer;
    }
    .el-slider__marks-text {
        font-size: 10px !important;
        margin-top: -22px;
        color: rgb(0, 238, 255);
    }
    .el-slider__runway {
        background-color: transparent;
    }
    .el-slider__bar {
        background-color: transparent;
    }
    .el-slider__stop {
        background-color: #336b85;
    }
    .el-slider {
        padding: 0 8px;
        background-color: rgba(23, 53, 67, 0.451);
        height: 2px;
        border-radius: 5px;
    }
}
#editViewpoint {
    position: fixed;
    z-index: 2;
    width: 350px;
    top: 0px;
    left: calc((100vw - 300px) / 2);
    pointer-events: auto;
    border: 2px solid #006699;
    background-color: #00669957;
    .el-dialog__headerbtn {
        top: -2px;
    }
    .el-tree-node__content {
        color: #fff;
    }
    .el-tree-node__content:hover {
        background-color: #0066998a;
    }
    .el-dialog__header {
        width: calc(100% - 40px);
        padding: 10px 20px;
        background-color: #0066997c;
        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }
        .el-icon svg {
            color: #fff;
        }
    }
    .el-dialog__body{
        padding: 10px;
    }
    .el-form-item__label {
        color: #fff;
    }
    .el-dialog__footer{
        padding: 0 10px 10px;
    }
}
</style>
